import { useOutlet } from 'react-router-dom';
import { useEffect } from 'react';
import { ConfigProvider } from 'esy-ui';
import { useChangeTheme } from '@/hooks';
import { classNames } from '@/styles/esy-ui';
// import Header from './header';
import Auth from './Auth';

function Layout() {
  const CurrentOutlet = useOutlet();
  const { initTheme } = useChangeTheme();

  useEffect(() => {
    initTheme();
  }, [initTheme]);

  return (
    <ConfigProvider classNames={classNames} formErrorType='error'>
      <div className='w-full h-full flex items-start justify-between rounded relative overflow-hidden select-none'>
        {/* <Header /> */}
        <Auth />
        <div className='flex-1 h-full bg-main'>{CurrentOutlet}</div>
      </div>
    </ConfigProvider>
  );
}

export default Layout;
